<template>
  <div class="webgl-container">
    <div id="webglDom" ref="webglDom">
    </div>
  </div>
</template>

<script>
// 引入threejs核心模块
import * as THREE from "three"
// 引入OrbitControls
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"
// import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
// //长方体 参数：长，宽，高
// var geometry = new THREE.BoxGeometry(100, 100, 100);
// // 球体 参数：半径60  经纬度细分数40,40
// var geometry = new THREE.SphereGeometry(60, 40, 40);
// // 圆柱  参数：圆柱面顶部、底部直径50,50   高度100  圆周分段数
// var geometry = new THREE.CylinderGeometry( 50, 50, 100, 25 );
// // 正八面体
// var geometry = new THREE.OctahedronGeometry(50);
// // 正十二面体
// var geometry = new THREE.DodecahedronGeometry(50);
// // 正二十面体
// var geometry = new THREE.IcosahedronGeometry(50);
export default {
  name: 'ThreePage',
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      textloader: null,
      width: 0,
      height: 0,
      clickStyle: {
        top: "10px",
        left: "50px",
      },
      isShow: false,
    }
  },
  watch: {
    skyType() {
      this.addSkeyBox();
    }
  },
  mounted() {
    this.$nextTick(this.init);
    window.addEventListener('click', this.onMouseClick, false);
  },
  methods: {
    onMouseClick(event) {
    },
    init() {
      // 初始化画布宽高
      const container = this.$refs.webglDom;
      this.width = container.offsetWidth;
      this.height = container.offsetHeight;

      // 场景
      this.scene = new THREE.Scene();
      this.scene.fog = new THREE.Fog(0x005577, 1, 2800)
      this.textloader = new THREE.TextureLoader();

      // 相机
      this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 0.01, 10000);
      this.camera.position.set(720, 720, 720);
      this.add(this.camera);
      this.camera.lookAt(this.scene.position);

      // 坐标系
      let axisHelper = new THREE.AxesHelper(1000);
      this.add(axisHelper);
      //平面
      const path = "css/images/pisa/";
      const format = '.png';
      let urls = [];
      const textureCube = new THREE.CubeTextureLoader().load(urls);
      this.scene.background = textureCube
      const geometry = new THREE.SphereGeometry(0.1, 32, 16);
      const material = new THREE.MeshBasicMaterial({color: 0xffffff, envMap: textureCube});
      let spheres = [
        require("../../images/spheres1.png"),
        require("../../images/spheres2.png"),
        require("../../images/spheres3.png"),
        require("../../images/spheres4.png"),
        require("../../images/spheres5.png"),
        require("../../images/spheres6.png"),
      ];
      for (let i = 0; i < 500; i++) {

        const mesh = new THREE.Mesh(geometry, material);

        mesh.position.x = Math.random() * 10 - 5;
        mesh.position.y = Math.random() * 10 - 5;
        mesh.position.z = Math.random() * 10 - 5;

        mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;

        this.scene.add(mesh);

        spheres.push(mesh);

      }
      // 添加灯光
      this.addLight();
      // 初始化一个加载器
      // 渲染器
      this.renderer = new THREE.WebGLRenderer({
        antialias: true
      })
      this.renderer.setClearColor(new THREE.Color('#000000'), 1);
      this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
      this.renderer.setSize(this.width, this.height);
      document.getElementById("webglDom").appendChild(this.renderer.domElement);

      // OrbitControls
      new OrbitControls(this.camera, this.renderer.domElement);
      this.render();
    },
    addLight() {
      // 环境光
      const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
      this.add(light);

      // // 平行光源
      const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
      directionalLight.position.set(200, 600, 200);
      this.add(directionalLight);
    },
    add(obj) {
      this.scene.add(obj);
    },
    render() {
      this.renderer.render(this.scene, this.camera);
      requestAnimationFrame(this.render);
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#webglDom,
.webgl-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 2px;
}

.clickClass {
  position: fixed;
  color: aliceblue;
  padding: 40px;
  width: 400px;
  height: 250px;
  /* background-color: rgba(72, 67, 67, 0.56); */
  background-image: url("http://gaohuacloud.com/prod-api/profile/avatar/2022/07/22/panelThree_20220722104950A023.png");
  background-size: cover;
}
</style>

